<template>
  <div class="photo_box">
    <h1>{{ title}}</h1>
    <p class="subtitle">
      <span>{{ author_name }}</span>
      <span>来自于{{ from }}</span>
    </p>
    <p>
      <span>{{ date}}</span>
      <span>{{ likes }}</span>
    </p>
    <hr>
    <!-- 缩略图 -->
    <div class="thumbs">
      <!-- <img
        class="preview-img"
        v-for="(item, index) in list"
        :key="index"
        :src="item.url"
        height="100"
        @click="$preview.open(index, list)"
      >-->
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
    <!-- 文章内容 -->
    <div class="content">{{ title }}</div>
    <!-- 评论子组件 -->
    <cmt-box></cmt-box>
  </div>
</template>

<script>
import comment from '../subcomponent/comments.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      title: '',
      author_name: '',
      likes: Math.floor(Math.random() * 30) + 1,
      date: '',
      from: '',
      slide1: [],
      w: 600,
      h: 400
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$http.get('../../data_file/old.json')
        .then(data => {
          var data = data.body
          console.log(data);

          if (data.error_code !== 0) {
            Toast({
              message: '加载图片列表失败，请刷新重试···',
            })
          }
          var item = data.result.data[this.id]
          this.author_name = item.author_name
          this.date = item.date
          this.from = item.category
          this.title = item.title
          var u1 = item.thumbnail_pic_s
          var u2 = item.thumbnail_pic_s02
          var u3 = item.thumbnail_pic_s03
          this.slide1.push({ msrc: u1, src: u1, w: this.w, h: this.h })
          this.slide1.push({ msrc: u2, src: u2, w: this.w, h: this.h })
          this.slide1.push({ msrc: u3, src: u3, w: this.w, h: this.h })
        })
    },
    handleClose() {
      console.log('close event')
    }
  },
  components: {
    'cmt-box': comment
  }
}
</script>

<style lang="scss" scoped>
.mint-button {
  height: 36px;
}
.photo_box {
  padding: 3px;
  h1 {
    font-size: 16px;
    text-align: center;
    color: #26a2ff;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
  }
  .content {
    font-size: 16px;
    line-height: 30px;
  }
}
</style>
